<template>
  <button
    class="easy-button"
    :style="
      isHover
        ? Object.assign(hoverStyle, sizeStyle, disabledStyle, dangerStyle, ghostStyle, shapeStyle)
        : Object.assign(typeStyle, sizeStyle, disabledStyle, dangerStyle, ghostStyle, shapeStyle)
    "
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
    @click="clickHandler"
  >
    <slot>Button</slot>
  </button>
</template>

<script lang="ts">
import { defineComponent, computed, PropType, ref } from 'vue'

export default defineComponent({
  name: 'Buttton',
  props: {
    type: {
      type: String as PropType<'default' | 'primary' | 'dashed' | 'text' | 'link'>,
      default: 'default',
    },
    size: {
      type: String as PropType<'large' | 'default' | 'mini'>,
      default: 'default',
    },
    disabled: {
      type: Boolean as PropType<true | false>,
      default: false,
    },
    danger: {
      type: Boolean as PropType<true | false>,
      default: false,
    },
    ghost: {
      type: Boolean as PropType<true | false>,
      default: false,
    },
    shape: {
      type: String as PropType<'round' | 'circle'>,
      default: 'round',
    },
  },
  emits: ['on-click'],
  setup(props, context) {
    /* data */
    const isHover = ref<boolean>(false)
    /* computed */
    const typeStyle = computed(() => {
      let style = {
        background: '#fff',
        color: 'rgb(0,0,0,.85)',
        border: '1px solid #d9d9d9',
      }
      if (props.type === 'primary') {
        style.color = '#fff'
        style.background = '#1890ff'
        style.border = '1px solid #1890ff'
      }
      if (props.type === 'dashed') {
        style.border = '1px dashed #d9d9d9'
      }
      if (props.type === 'text') {
        style.border = '0px solid transparent'
      }
      if (props.type === 'link') {
        style.color = '#1890ff'
        style.border = '0px solid transparent'
      }
      return style
    })
    const hoverStyle = computed(() => {
      let style = {
        color: '#40a9ff',
        background: '#ffffff',
        border: '1px solid #40a9ff',
      }
      if (props.type === 'primary') {
        style.color = '#fff'
        style.background = '#40a9ff'
      }
      if (props.type === 'dashed') {
        style.color = '#40a9ff'
        style.background = '#ffffff'
        style.border = '1px dashed #40a9ff'
      }
      if (props.type === 'text') {
        style.color = 'rgba(0,0,0,.85)'
        style.background = 'rgba(0,0,0,.018)'
        style.border = '0px solid transparent'
      }
      if (props.type === 'link') {
        style.color = '#40a9ff'
        style.border = '0px solid transparent'
      }
      return style
    })
    const sizeStyle = computed(() => {
      let style = {
        height: '32px',
        padding: '4px 15px',
        fontSize: '14px',
      }
      if (props.size === 'large') {
        style.height = '40px'
        style.padding = '6.4px 15px'
        style.fontSize = '16px'
      }
      if (props.size === 'mini') {
        style.height = '24px'
        style.padding = '0px 7px'
        style.fontSize = '14px'
      }
      return style
    })
    const disabledStyle = computed(() => {
      return props.disabled
        ? props.type === 'text' || props.type === 'link'
          ? {
              color: 'rgba(0,0,0,.25)',
              borderColor: '#d9d9d9',
              textShadow: 'none',
              boxShadow: 'none',
              cursor: 'not-allowed',
            }
          : {
              color: 'rgba(0,0,0,.25)',
              background: '#f5f5f5',
              borderColor: '#d9d9d9',
              textShadow: 'none',
              boxShadow: 'none',
              cursor: 'not-allowed',
            }
        : {}
    })
    const dangerStyle = computed(() => {
      return props.danger
        ? props.type === 'primary'
          ? {
              color: '#ffffff',
              background: '#ff4d4f',
              borderColor: '#ff4d4f',
            }
          : {
              color: '#ff4d4f',
              background: '#ffffff',
              borderColor: '#ff4d4f',
            }
        : {}
    })
    const ghostStyle = computed(() => {
      let style = {}
      switch (props.type) {
        case 'primary':
          style = {
            color: '#1890ff',
            borderColor: '#1890ff',
            backgroundColor: 'transparent',
          }
          break
        default:
          style = {
            color: '#ffffff',
            borderColor: '#fffffff',
            backgroundColor: 'transparent',
          }
      }
      return props.ghost ? style : {}
    })
    const shapeStyle = computed(() => {
      return props.shape === 'circle'
        ? {
            borderRadius: '40px',
          }
        : {}
    })
    function clickHandler() {
      if (props.disabled) return
      context.emit('on-click')
    }
    return {
      isHover,
      typeStyle,
      hoverStyle,
      sizeStyle,
      disabledStyle,
      dangerStyle,
      ghostStyle,
      shapeStyle,
      clickHandler,
    }
  },
})
</script>

<style lang="scss">
.easy-button {
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
  margin: 8px;
  cursor: pointer;
  &:focus {
    outline: 0px;
  }
}
</style>
